<template>
  <div class="map-container">
    <l-map
      ref="map"
      class="map"
      :zoom="zoom"
      :maxZoom="maxZoom"
      :center="center"
      @update:zoom="zoomUpdated"
      @update:center="centerUpdated"
      @update:bounds="boundsUpdated"
    >
      <!-- 1图层控制器
          collapsed:false 展开图层控制器；默认true：收缩图层控制器
      -->
      <l-control-layers position="topright" :collapsed="false"></l-control-layers>
      <!-- 1.1基础图层 -->
      <l-tile-layer
        v-for="tile in tileProviders"
        ref="baseLayer"
        :key="tile.name"
        :name="tile.name"
        :visible="tile.visible"
        :url="tile.url"
        :attribution="tile.attribution"
        :options="tile.options"
        layer-type="base"
      />

      <!-- 热力图 -->
      <map-heat-layer
        v-if="showHeat"
        :data-list="heat.data"
        :latKey="heat.latKey"
        :lngKey="heat.lngKey"
        :valueKey="heat.valueKey"
        :options="heat.options"
      ></map-heat-layer>
      
    </l-map>
  </div>
</template>
<script>
import {
  LMap,
  LTileLayer,
  LControlLayers,
  LLayerGroup,
  LCircle
} from 'vue2-leaflet'
import MapHeatLayer from './components/MapHeatLayer'

export default {
  name: 'MapControlLayer',
  data() {
    // 模拟数据
    var _heatData = []
    for (var i = 0; i < 1000; i++) {
      _heatData.push({
        lat: 39.9 + Math.random(),
        lng: 116.3 + Math.random(),
        value: Math.random() * 100
      })
    }

    return {
      zoom: 12,
      maxZoom: 16,
      center: [39.907103, 116.396885],
      // 可选的底图
      tileProviders: [
        {
          name: '高德',
          visible: true,
          url:
            'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
          options: {
            subdomains: ['1', '2', '3', '4']
          },
          attribution: '高德'
        },
        {
          name: '高德卫星',
          visible: false,
          url:
            'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
          options: {
            subdomains: ['1', '2', '3', '4']
          },
          attribution: '高德卫星'
        },
        {
          name: '离线地图',
          visible: false,
          url: 'http://10.121.132.187:8001/map/simple/{z}/{x}/{y}.png',

          attribution: '离线地图'
        }
      ],
      heat: {
        data: _heatData,
        latKey: 'lat',
        lngKey: 'lng',
        valueKey: 'value',
        options: {
          radius: 20
        }
      },
      showHeat: true
    }
  },
  components: {
    LMap,
    LTileLayer,
    LControlLayers,
    LLayerGroup,
    LCircle,
    MapHeatLayer
  },
  methods: {
    zoomUpdated(zoom) {
      console.log('zoomUpdated=' + zoom)
      //1-12级显示heat
      this.showHeat = zoom <= 12
    },
    centerUpdated(center) {
      console.log('centerUpdated=' + center)
    },
    boundsUpdated(bounds) {
      console.log('boundsUpdated=' + bounds)
    }
  },
  mounted() {
    this.$nextTick(() => {})
  },
  beforeDestroy() {
    this.$refs.map.mapObject.remove()
  }
}
</script>
